<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>frame</title>
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />

	<style>
		html, body {width: 100%;min-height: 100%;background: #e5e5e5;}
		body{
			overflow: hidden;
		}
		.h80 {height: 80px;}
		.h40 {height: 40px;}
		.h20 {height: 20px;}
    	.h10 {height: 10px;background: #e5e5e5;}
		.h1 {height: 1px;margin-left: 15px;background: #e5e5e5;}
		.fr {float: right;}
		.fl {float: left;}
		.hightitem {background-color: #fff;}

		/* 抢购样式 */
		.snapup {height: 80px;}
		.snapup .infologo {height: 60px; margin: 10px;}
		.snapup .shelf2 {display: table;height: inherit;margin-left: 10px;}
		.snapup .shelfcell {display: table-cell;vertical-align: middle;}
		.snapup .shelfcell .title {margin-bottom: 10px;}
		.snapup .arrow {width: 20px; padding-top: 30px;padding-right: 10px;}

		/* 2X2样式 */
		.row {display: -webkit-box;/*display: -webkit-flex;display: flex;*/}
		.col {-webkit-box-flex:1; -webkit-flex:1; flex:1;position: relative;}
		.col img {position: absolute; right: 0; width: 80px; top: 0;}
		.col .matrixcell {display: table-cell;vertical-align: middle; padding-left: 10px;}
		.col .matrixcell .title {margin-bottom: 10px;overflow: hidden;}
		.matrix {display: table;height: inherit;}

		/* 猜你喜欢 */
		.guesstitle {height: 40px;line-height: 40px;padding-left: 10px;vertical-align: top; font-size: 12px;color: #999;}
		.guesstitle img {height: 15px;padding-top: 12px; padding-left: 10px;}
		.home-tuan-list .item {position: relative; display: block; padding-left: 10px; border-bottom: 1px solid #e0e0e0;}
		.home-tuan-list .cnt {padding: 7px 10px 10px 0; display: box; display: -webkit-box; display: -webkit-flex;display: flex;min-height: 78px;  background-size: auto 1px; }
		.home-tuan-list .pic {margin-right: 10px; background: center; }
		.home-tuan-list img {width: 90px; height: 66px; margin-top: 7px; margin-bottom: 5px; border-radius: 3px; }
		.home-tuan-list .wrap {-webkit-box-flex: 1; -webkit-flex: 1;flex: 1;}
		.home-tuan-list .wrap2 {display: table; height: 88px; width: 100%; }
		.home-tuan-list .content {-webkit-box-flex: 1; -webkit-flex: 1;flex: 1; display: table-cell; vertical-align: middle; }
		.home-tuan-list .shopname {color: #333;font-size: 17px; max-width: 11em; white-space: nowrap; word-wrap: normal; text-overflow: ellipsis; overflow: hidden; min-height: 10px; padding-bottom: 2px; padding-top: 3px; display: inline-block;}
		.home-tuan-list .title {color: #666; line-height: 16px; font-size: 13px; max-height: 30px; overflow: hidden; padding-top: 3px; display: -webkit-box;display: -webkit-flex;display: flex; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -webkit-flex-flow: column;flex-flow: column;}
		.home-tuan-list .hot-title {margin-bottom: 8px; }
		.home-tuan-list .hot-subtitle {margin-bottom: 9px; }
		.home-tuan-list .info {margin-top: 9px; /*margin-bottom: 11px;*/ color: #666; font-size: 12px; position: relative; line-height: 15px; display: box; display: -webkit-box;display: -webkit-flex;
			display: flex; height: 15px; }
		.home-tuan-list .symbol {font-size: 14px; color: #f60; display: block; margin-top: 1px; }
		.home-tuan-list .price {color: #f60; font-size: 20px; line-height: 15px; margin-right: 5px; margin-top: 1px; }
		.home-tuan-list .o-price {color: #999; margin-top: 5px; line-height: 10px; }
		.home-tuan-list .sale {color: #f63; border: solid 1px #ff916e; padding: 3px 2px 2px; font-size: 10px; border-radius: 2px; -webkit-border-radius: 2px; margin-left: 5px; line-height: 10px; height: 10px; }
		.home-tuan-list .distance {-webkit-box-flex: 1; box-flex: 1;-webkit-flex: 1;flex: 1; -ms-box-flex: 1; -ms-flex: 1; text-align: right; line-height: 10px; margin-top: 5px; color: #999; float: right;font-size: 12px;}
		.home-tuan-list .price, .index-rec .home-tuan-list .o-price, .index-rec .home-tuan-list .distance, .index-rec .home-tuan-list .sale {display: block; line-height: 15px; font-size: 12px; }
		.Fix:after {display: block; content: ''; height: 0; clear: both; }

		/* 3. */
		.section03 .col img {width: 60px; top: 10px;}
		.section03 .title01 .title{color: #965037;}
		.section03 .title02 .title{color: #ffa001;}
		.section03 .title03 .title{color: #ff558c;}
		.section03 .title04 .title{color: #19b4ff;}
		.section03 .matrixcell .info {color: #666;}

		/* 2. */
		.section02 .shelfcell .title span{color: #ff6633;}
		.section02 .shelfcell .subtitel {color: #666;font-size: 14px;}
		

		/* 1. */
		.section01 .row {margin-top: 10px;}
		.section01 .col {text-align: center;}
		.section01 .col img {position: relative;width: 60%; }
		.section01 .col div {font-size: 13px;margin-top: 5px; }

		.presshover {background-color: #FAFAFA;}
		.brb {border-bottom: 1px solid #e0e0e0;border-right: 1px solid #e0e0e0;}
		.bb {border-bottom: 1px solid #e0e0e0;}
		.br {border-right: 1px solid #e0e0e0;}
		.swipe {
			width: 100%;
	        background-color: #fff;
	        overflow: hidden;
	        position: relative;
	    }
	    .swipe-wrap {
	        overflow: hidden;
	        position: relative;
	    }
	    .swipe-wrap .swipe-box {
	    	padding-bottom: 10px;
	        float: left;
	        width: 100%;
	        position: relative;
	    }
	</style>
</head>
<body>
	<div id="swipe" class="swipe section01">
		<div class="swipe-wrap">
			<div class="swipe-box"> 
				<div class="row">
					<div class="col" tapmode onclick="">
						<img src="../image/food_u.png" alt="">
						<div class="">
							美食
						</div>
					</div>
					<div class="col" tapmode onclick="">
						<img src="../image/snack_u.png" alt="">
						<div class="">
							小吃快餐
						</div>
					</div>
					<div class="col" tapmode onclick="">
						<img src="../image/bar_o.png" alt="">
						<div class="">
							休闲娱乐
						</div>
					</div>
					<div class="col" tapmode onclick="">
						<img src="../image/more_u.png" alt="">
						<div class="">
							全部分类
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col" tapmode onclick="">
						<img src="../image/groupon_u.png" alt="">
						<div class="">
							团购
						</div>
					</div>
					<div class="col" tapmode onclick="">
						<img src="../image/hotel_u.png" alt="">
						<div class="">
							订酒店
						</div>
					</div>
					<div class="col" tapmode onclick="">
						<img src="../image/takeaway_u.png" alt="">
						<div class="">
							订外卖
						</div>
					</div>
					<div class="col" tapmode onclick="">
						<img src="../image/film_u.png" alt="">
						<div class="">
							看电影
						</div>
					</div>
				</div>
			</div>
			<div class="swipe-box">
				<div class="row">
					<div class="col" tapmode onclick="">
						<img src="../image/liren.png" alt="">
						<div class="">
							丽人
						</div>
					</div>
					<div class="col" tapmode onclick="">
						<img src="../image/qinzi.png" alt="">
						<div class="">
							亲子
						</div>
					</div>
					<div class="col" tapmode onclick="">
						<img src="../image/jiehun.png" alt="">
						<div class="">
							结婚
						</div>
					</div>
					<div class="col" tapmode onclick="">
						<img src="../image/jiazhuang.png" alt="">
						<div class="">
							家装
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col" tapmode onclick="">
						<img src="../image/dingzuo.png" alt="">
						<div class="">
							订座
						</div>
					</div>
					<div class="col" tapmode onclick="">
						<img src="../image/zhaoyouhui.png" alt="">
						<div class="">
							找优惠
						</div>
					</div>
					<div class="col" tapmode onclick="">
						<img src="../image/bangdan.png" alt="">
						<div class="">
							看榜单
						</div>
					</div>
					<div class="col" tapmode onclick="">
						<img src="../image/dianping.png" alt="">
						<div class="">
							写点评
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 2. 大牌抢购，进入10点倒计时抢购 -->
	<div class="h20"></div>
	<div class="snapup hightitem section02" tapmode="presshover" onclick="">
		<img src="../image/api_1.png" alt="" class="fl infologo">
		<div class="shelf2 fl">
			<div class="shelfcell">
				<div class="title">羲和雅苑烤鸭坊 <span>￥85</span></div>
				<span class="subtitel">每天十点开抢</span>
			</div>
			
		</div>
		<img src="../image/arrow.png" alt="" class="arrow fr">
	</div>

	<!-- 3. 2X2 列表 -->
	<div class="h20"></div>
	<div class="row hightitem section03">
		<div class="col h80 brb" tapmode="presshover" onclick="">
			<div class="matrix">
				<div class="matrixcell title01">
					<div class="title">免费吃喝玩</div>
					<div class="info">新用户专享</div>
				</div>
			</div>
			<img src="../image/api_33.png" alt="" class="fl">
		</div>
		
		<div class="col h80 bb" tapmode="presshover" onclick="">
			<div class="matrix">
				<div class="matrixcell title02">
					<div class="title">免费看电影</div>
					<div class="info">新用户专享</div>
				</div>
			</div>
			<img src="../image/api_33.png" alt="" class="fl">
		</div>
	</div>
	<div class="row hightitem section03">
		<div class="col h80 br" tapmode="presshover" onclick="">
			<div class="matrix">
				<div class="matrixcell title03">
					<div class="title">食色性也</div>
					<div class="info">光棍节等你来</div>
				</div>
			</div>
			<img src="../image/api_33.png" alt="" class="fl">
		</div>
		
		<div class="col h80" tapmode="presshover" onclick="">
			<div class="matrix">
				<div class="matrixcell title04">
					<div class="title">点评祝福</div>
					<div class="info">单身用户专享</div>
				</div>
			</div>
			<img src="../image/api_33.png" alt="" class="fl">
		</div>
	</div>

	<!-- 4. 猜你喜欢 -->
	<div class="guesstitle">猜你喜欢<img src="../image/home_competitive_icon.png" alt=""></div>
	<div class="home-tuan-list">
		<a href="" class="item hightitem" onclick="" tapmode="presshover">
            <div class="cnt">
                <img class="pic" src="../image/api_1.png">
                <div class="wrap">
                    <div class="wrap2">
                        <div class="content">
                            <div class="shopname hot-title">品牌优惠</div>
                            <div class="title hot-subtitle">热门快餐5折起</div>
                        </div>
                    </div>           
                </div>
            </div>
        </a>
        <a href="" class="item hightitem" onclick=""  tapmode="presshover">
            <div class="cnt">
                <img class="pic" src="../image/api_1.png">
                <div class="wrap">
                    <div class="wrap2">
                        <div class="content">
                            <div class="shopname hot-title">双11美食大牌立减</div>
                            <div class="title hot-subtitle">最赞火锅全场特惠</div>
                        </div>
                    </div>           
                </div>
            </div>
        </a>
        <a href="" class="item hightitem" onclick="" tapmode="presshover">
            <div class="cnt">
                <img class="pic" src="../image/api_1.png">
                <div class="wrap">
                    <div class="wrap2">
                        <div class="content">
                            <div class="shopname hot-title">一分钱上早教</div>
                            <div class="title hot-subtitle">幼教排行榜</div>
                        </div>
                    </div>           
                </div>
            </div>
        </a>
        <a href="" class="item Fix hightitem" onclick="" tapmode="presshover">
            <div class="cnt">
            	<img class="pic" src="../image/api_1.png">
	            <div class="wrap">
		            <div class="wrap2">
			            <div class="content">
			                <div class="shopname">emoi生活智能情感音响灯免费送</div><span class="distance">8.9km</span>
			                <div class="title">智能情感音响灯 舒缓心情 触动情感 emoi基本生活智能情感音响灯免费送</div>
			                <div class="info">
			                    <span class="symbol">¥</span>
			                    <span class="price">0.0</span>
			                    <del class="o-price">¥299.0</del>
			                </div>
			            </div>
		            </div>           
	            </div>
            </div>
        </a>
        <a href="" class="item Fix hightitem" onclick="" tapmode="presshover">
            <div class="cnt">
            	<img class="pic" src="../image/api_1.png">
	            <div class="wrap">
		            <div class="wrap2">
			            <div class="content">
			                <div class="shopname">云吉八方</div><span class="distance">650m</span>
			                <div class="title">代金劵 不限时段通用，免费wifi，可累计使用，全场通用</div>
			                <div class="info">
			                    <span class="symbol">¥</span>
			                    <span class="price">100.0</span>
			                    <span class="sale">返现1%</span>
			                </div>
			            </div>
		            </div>           
	            </div>
            </div>
        </a>
        <a href="" class="item Fix hightitem" onclick="" tapmode="presshover">
            <div class="cnt">
            	<img class="pic" src="../image/api_1.png">
	            <div class="wrap">
		            <div class="wrap2">
			            <div class="content">
			                <div class="shopname">上鱼舫</div><span class="distance">3.6km</span>
			                <div class="title">[6店通用]代金券 不限时段通用，可累计使用，全场通用</div>
			                <div class="info">
			                    <span class="symbol">¥</span>
			                    <span class="price">158.0</span>
			                    <del class="o-price">¥200.0</del>
			                </div>
			            </div>
		            </div>           
	            </div>
            </div>
        </a>
        <a href="" class="item Fix hightitem" onclick="" tapmode="presshover">
            <div class="cnt">
            	<img class="pic" src="../image/api_1.png">
	            <div class="wrap">
		            <div class="wrap2">
			            <div class="content">
			                <div class="shopname">six酒吧惊爆体验中</div><span class="distance">2.5km</span>
			                <div class="title">爆米花 不限时段通用 免费WiFi</div>
			                <div class="info">
			                    <span class="symbol">¥</span>
			                    <span class="price">1.0</span>
			                    <del class="o-price">¥15.0</del>
			                </div>
			            </div>
		            </div>           
	            </div>
            </div>
        </a>
        <a href="" class="item Fix hightitem" onclick="" tapmode="presshover">
            <div class="cnt">
            	<img class="pic" src="../image/api_1.png">
	            <div class="wrap">
		            <div class="wrap2">
			            <div class="content">
			                <div class="shopname">lewa乐画</div><span class="distance">1.0km</span>
			                <div class="title">零基础diy娱乐回话情侣套餐</div>
			                <div class="info">
			                    <span class="symbol">¥</span>
			                    <span class="price">158.0</span>
			                    <span class="sale">返现1%</span>
			                </div>
			            </div>
		            </div>           
	            </div>
            </div>
        </a>
        <a href="" class="item Fix hightitem" onclick="" tapmode="presshover">
            <div class="cnt">
            	<img class="pic" src="../image/api_1.png">
	            <div class="wrap">
		            <div class="wrap2">
			            <div class="content">
			                <div class="shopname">巴依老爷</div><span class="distance">110m</span>
			                <div class="title">[5店通用]代金券 不限时段通用，可累计使用，全场通用</div>
			                <div class="info">
			                    <span class="symbol">¥</span>
			                    <span class="price">81.81</span>
			                    <span class="sale">立减6元</span>
			                    <span class="sale">返现1%</span>
			                </div>
			            </div>
		            </div>           
	            </div>
            </div>
        </a>
        <a href="" class="item Fix hightitem" onclick="" tapmode="presshover">
            <div class="cnt">
            	<img class="pic" src="../image/api_1.png">
	            <div class="wrap">
		            <div class="wrap2">
			            <div class="content">
			                <div class="shopname">金百万</div><span class="distance">650m</span>
			                <div class="title">[30店通用]代金券 可累计使用，可使用包厢</div>
			                <div class="info">
			                    <span class="symbol">¥</span>
			                    <span class="price">83.0</span>
			                    <span class="sale">立减10元</span>
			                    <span class="sale">返现1%</span>
			                </div>
			            </div>
		            </div>           
	            </div>
            </div>
        </a>
	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/swipe.js"></script>
<script>
	window.onload = function() {
		var mySwiper = Swipe($api.byId('swipe'),{
			continuous: true
		});
	}
</script>
</html>